<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机验证码校验</title>
    <script src="../js/tool.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            margin: 200px 500px auto;
            width: 300px;
            float: left;
        }
        #verifyCode{
            position: relative;
            width: 100px;
            height: 30px;
            border: 1px solid #333;
            margin: 10px;
            line-height: 30px;
            text-align: center;
            float: left;
        }
        .box #newCode{
            width: 100px;
            height: 30px;
            outline: none;
            float: left;
            margin:10px ;
            font-size: 18px;
        }
        .box button{
           margin: 10px 40px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" name="" id="newCode">
        <div id="verifyCode">
        </div>
        <button id="valid">验证</button>
    </div>
    <script>
        window.onload = function(){
            var newCode = document.getElementById("newCode");
            var divCode = document.getElementById("verifyCode");
            var valid = document.getElementById("valid");
            var code;
            code = creatCode(4);
            divCode.innerHTML = code+""; 
            // function creadCode() {
            //     code = "";
            //     var codeLength = 4;
            //     var ramdonCode = [0,,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            //                     'S','T','U','V','W','X','Y','Z'];
            //     for(var i = 0;i < codeLength;i++){
            //         var index = Math.floor(Math.random() * 36);
            //         code += ramdonCode[index];
            //         console.log(code);
            //     } 
            //     divCode.innerHTML = code;        
            // }
            // valid.onclick = function(){
            //     var text = newCode.value.toUpperCase();
            //     if(text === code){
            //         window.location.href="https://www.baidu.com/";
            //     }else{
            //         alert("验证码错误，请重新输入！");
            //     }
            // }
            
        }
    </script>    
</body>
</html>